<template>
	<view class="live-list">
		<!-- 搜索 -->
		<view class="live-search">
			<input type="text" v-model="search" :placeholder="'\ue607 试试搜 布偶/主播'" confirm-type="search" @confirm="bindConfirm" placeholder-class="input-place" />
		</view>
		<!-- tab -->
		<view class="tab-list">
			<view class="tab-item" v-for="(item, index) in tabs" :key="item.id" :class="{ 'tab-item-active': typeId == item.id }" @click="bindTab(item.id)">{{ item.name }}</view>
		</view>
		<view class="background-box">
			<!-- 正在直播中(标题) -->
			<view class="live-b-title" v-if="list.length">
				<text class="live-b-title-left" v-if="typeId != 3">正在直播中（{{ zhibonum }}）</text>
				<text class="live-b-title-left" v-else>回放直播</text>
			</view>
			<!-- 正在直播中(列表) -->
			<view class="live-ongoing-list">
				<view class="live-ongoing-item" v-for="(item, index) in list" :key="index" v-if="index < 4" @click="bindLive(item.roomid)">
					<view class="live-ongoing-bq" v-if="typeId != 3">
						<icon class="icon-BFTB"></icon>
						<text>直播中</text>
					</view>
					<image :src="item.headimgurl" mode="aspectFill" class="ongoing-head-img"></image>
					<image :src="'https://nabercat.oss-cn-hangzhou.aliyuncs.com/' + item.img" mode="aspectFill" class="ongoing-main-img"></image>
					<view v-if="typeId == 3" class="live-ongoing-time">{{ formatDataThree(item.starttime) }}</view>
					<view class="live-ongoing-username">{{ item.name }}</view>
				</view>
			</view>
			<!-- 预告清单(标题) -->
			<view class="live-b-title" v-if="warningList.length">
				<text class="live-b-title-left">预告清单</text>
				<view class="live-b-title-right" @click="lookAllYs">
					<text>全部</text>
					<icon class="icon-right"></icon>
				</view>
			</view>
			<!-- 预告清单(列表) -->
			<scroll-view class="notice-list" scroll-x="true" v-if="warningList.length">
				<view class="notice-item" v-for="(item, index) in warningList" :key="index" @click="bindLive(item.roomid)">
					<view class="notice-head-img"><image :src="item.headimgurl" mode="aspectFill"></image></view>
					<image :src="'https://nabercat.oss-cn-hangzhou.aliyuncs.com/' + item.img" mode="aspectFill" class="notice-main-img"></image>
					<view class="notice-username">{{ item.name }}</view>
					<view class="notice-time">{{ formatDataThree(item.starttime) }}开播</view>
					<subscribe
						:room-id="item.roomid"
						:width="60"
						:height="20"
						:fontSize="12"
						:backgroundColor="'#fa8384'"
						stop-propagation
						@tap.stop
						class="subscribe-btn"
					></subscribe>
				</view>
			</scroll-view>
			<!-- 正在直播中(列表) -->
			<view class="live-ongoing-list">
				<view class="live-ongoing-item" v-for="(item, index) in list" :key="index" v-if="index > 3" @click="bindLive(item.roomid)">
					<view class="live-ongoing-bq" v-if="typeId != 3">
						<icon class="icon-BFTB"></icon>
						<text>直播中</text>
					</view>
					<image :src="item.headimgurl" mode="aspectFill" class="ongoing-head-img"></image>
					<image :src="'https://nabercat.oss-cn-hangzhou.aliyuncs.com/' + item.img" mode="aspectFill" class="ongoing-main-img"></image>
					<view v-if="typeId == 3" class="live-ongoing-time">{{ formatDataThree(item.starttime) }}</view>
					<view class="live-ongoing-username">{{ item.name }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { xZhibols } from '@/api/index.js';
import { formatDataThree } from '@/util/time.js';
let livePlayer = requirePlugin('live-player-plugin');
export default {
	props: {
		list: {
			type: Array,
			default: () => []
		},
		zhibonum: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			search: '',
			warningList: [], //预告列表
			tabs: [
				{
					name: '已出窝',
					id: 1
				},
				{
					name: '预售',
					id: 2
				},
				{
					name: '回放',
					id: 3
				}
			],
			typeId: 1
		};
	},
	created() {
		this.xZhibols();
	},
	methods: {
		formatDataThree,
		// tab切换
		bindTab(typeId) {
			this.typeId = typeId;
			this.$emit('liveTab', typeId);
			this.xZhibols();
		},
		// 搜索
		bindConfirm() {
			this.$emit('search');
		},
		// 获取预约列表
		async xZhibols() {
			const res = await xZhibols({
				start_time: 2,
				page: 1
			});
			this.warningList = res.list;
		},
		// 跳转直播
		bindLive(id) {
			uni.navigateTo({
				url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${id}`
			});
		},
		// 查看更多
		lookAllYs() {
			uni.navigateTo({
				url: `/pages/trailer/trailer`
			});
		}
	}
};
</script>

<style lang="scss">
.live-list {
	padding: 30rpx 0;
	.live-search {
		padding: 0 20rpx;
		margin-bottom: 20rpx;
		& > input {
			width: 100%;
			height: 72rpx;
			text-align: center;
			font-size: 28rpx;
			background: #f6f6f6;
			border-radius: 36rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			font-family: 'iconfont' !important;
			font-style: normal;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
		}
		/deep/.input-place {
			font-size: 24rpx;
			font-family: 'iconfont' !important;
			font-style: normal;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
		}
	}
	.tab-list {
		display: flex;
		margin-bottom: 24rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		.tab-item {
			width: 144rpx;
			height: 50rpx;
			background: #f8f8f8;
			border-radius: 26rpx;
			margin-right: 24rpx;
			color: #333333;
			font-size: 26rpx;
			text-align: center;
			line-height: 50rpx;
		}
		.tab-item-active {
			background: #fa8384;
			color: #ffffff;
		}
	}
	.live-b-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		.live-b-title-left {
			font-size: 14px;
			font-weight: 600;
			color: #333333;
		}
		.live-b-title-right {
			width: 108rpx;
			height: 40rpx;
			border-radius: 20rpx;
			border: 2rpx solid #d5d5d5;
			padding: 0 18rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 24rpx;
			color: #333333;
			.icon-right {
				width: 12rpx;
				height: 16rpx;
				background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/live-index-right.png) no-repeat;
				background-size: cover;
			}
		}
	}
	.live-ongoing-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.live-ongoing-item {
			width: 330rpx;
			// height: 450rpx;
			padding-bottom: 20rpx;
			background: #ffffff;
			border-radius: 16rpx;
			position: relative;
			margin-bottom: 20rpx;
			.live-ongoing-bq {
				position: absolute;
				top: 20rpx;
				left: 20rpx;
				width: 124rpx;
				height: 36rpx;
				background: rgba(0, 0, 0, 0.24);
				border-radius: 18rpx;
				color: #ffffff;
				font-size: 24rpx;
				line-height: 36rpx;
				display: flex;
				.icon-BFTB {
					width: 36rpx;
					height: 36rpx;
					background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/BrowserPreview_tmp.gif) no-repeat;
					background-size: cover;
					border-radius: 50%;
					margin-right: 8rpx;
				}
			}
			.ongoing-head-img {
				position: absolute;
				top: 302rpx;
				left: 50%;
				transform: translateX(-50%);
				width: 76rpx;
				height: 76rpx;
				border-radius: 50%;
				border: 4rpx solid #ffffff;
			}
			.ongoing-main-img {
				width: 100%;
				height: 340rpx;
				border-radius: 16rpx 16rpx 0 0;
				margin-bottom: 54rpx;
			}
			.live-ongoing-time {
				font-size: 26rpx;
				font-weight: 500;
				color: #fa8384;
				text-align: center;
				margin-bottom: 6rpx;
			}
			.live-ongoing-username {
				font-size: 28rpx;
				font-weight: 600;
				color: #333333;
				text-align: center;
			}
		}
	}
	.notice-list {
		height: 392rpx;
		width: 100%;
		white-space: nowrap;
		margin-bottom: 32rpx;
		.notice-item {
			width: 208rpx;
			height: 100%;
			background: #ffffff;
			border-radius: 16rpx;
			position: relative;
			display: inline-block;
			margin-right: 24rpx;
			text-align: center;
			vertical-align: top;
			.notice-head-img {
				position: absolute;
				top: 174rpx;
				left: 50%;
				transform: translateX(-50%);
				width: 68rpx;
				height: 68rpx;
				border-radius: 50%;
				border: 4rpx solid #ffffff;
				overflow: hidden;
				& > image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
			.notice-main-img {
				width: 208rpx;
				height: 208rpx;
				border-radius: 16rpx;
				margin-bottom: 42rpx;
			}
			.notice-username {
				font-size: 28rpx;
				color: #333333;
				text-align: center;
				margin-bottom: 2rpx;
				font-weight: 500;
			}
			.notice-time {
				font-size: 24rpx;
				font-weight: 500;
				color: #fa8384;
				text-align: center;
				margin-bottom: 12rpx;
			}
			.notice-yuyue {
				display: inline-block;
				width: 60px;
				height: 20px;
				// background: #fa8384;
				border-radius: 20rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #ffffff;
				position: relative;
				.subscribe-btn {
					position: absolute;
					top: 0;
					left: 0;
					// opacity: 0;
				}
			}
		}
	}
}
.background-box {
	background: #f9f9f9;
	padding: 20rpx 30rpx;
}
</style>
